<script setup lang="ts">
import Avatar1Img from '../pic/avatar-1.webp';
import Avatar2Img from '../pic/avatar-2.webp';
import Avatar3Img from '../pic/avatar-3.webp';
import CommentItem from './CommentItem.vue';

const comments = [
  {
    avatar: Avatar1Img,
    name: 'Lara Liras',
    time: new Date('2024-10-05'),
    content: 'O jogo é bom , mais precisa de um incentivo, no geral eu gostei bastante Dá pra pessoa distrair e jogar é muito saudável ! Amei os porquinhos kkk',
    useful: 249,
  },
  {
    avatar: Avatar2Img,
    name: 'Angelita Da Silva',
    time: new Date('2024-04-17'),
    content: 'Gosto muito, o jogo é super divertido e o jackpot explode todos os dias',
    useful: 249,
  },
  {
    avatar: Avatar3Img,
    name: 'Rubens Vieira dos Santos',
    time: new Date('2024-02-10'),
    content: 'Essa avaliação foi marcada como útil por 22 pessoas',
    useful: 249,
  },
];
</script>

<template>
  <div>
    <header class="subtitle">
      <h2>Classificações e resenhas</h2>
      <i class="i-ri:arrow-right-line" />
    </header>

    <div class="mb-4 mt-2 text-3.5 text-sys-text-body">
      <span>As notas e avaliações são verificadas</span>
      &nbsp;<i class="i-ri:error-warning-line text-4" />
    </div>

    <div class="my-4 flex gap-3">
      <div class="w-30 flex-center gap-1 border-(1 transparent solid) rounded-full bg-#E6F3EF py-2 text-#01875F">
        <i class="i-material-symbols:phone-iphone-outline" />
        <span class="text-3.5">Telefone</span>
      </div>
      <div class="w-30 flex-center gap-1 border-(1 slate-100 solid) rounded-full py-2">
        <i class="i-material-symbols:tablet-mac-outline" />
        <span class="text-3.5 text-#3E404C">Tablet</span>
      </div>
    </div>

    <div class="flex text-sm">
      <div>
        <div class="text-12 text-#131416 lh-none">
          4.9
        </div>
        <div class="mb-2 mt-1 flex gap-1 text-#01875F">
          <i v-for="i of 5" :key="i" class="i-ri:star-fill" />
        </div>
        <div>1,91 mil avaliações</div>
      </div>
      <div class="ml-4 flex-1">
        <div v-for="(ratio, i) of [95, 5, 5, 2, 3]" :key="i" class="flex items-center">
          <div class="mr-2">
            {{ 5 - i }}
          </div>
          <div class="h-2 flex-1 rounded-full" :style="`background: linear-gradient(to right, #01875F ${ratio}%, #DDDEE4 ${ratio}%);`" />
        </div>
      </div>
    </div>

    <div class="grid mt-4 gap-4">
      <CommentItem v-for="comment of comments" :key="comment.name" v-bind="comment" />
      <div class="text-#01875F">
        Ver todas as avaliações
      </div>
    </div>
  </div>
</template>
